<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <title>index</title>
  <link rel="stylesheet" href="/static//styles//index-5.css">
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/node_modules/swiper/swiper-bundle.min.css" />
  <script src="/utils/utils.js"></script>
  <script src="/node_modules/swiper/swiper-bundle.min.js"></script>
  <script src="/static/javas/jquery-3.6.0.min.js"></script>

  <link rel="stylesheet" href="/static//styles/style.css">

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WdqZdWqAkjMtayZFaswW4jgRNO094HDY"></script>
</head>

<body>
  <div class="box container p-0 bg-white justify-content-between mt-lg-2 mt-0">
    <div class="div1">1-100-300-300
      &nbsp;
      emailadomain.com</div>
    <div class="div2"><img src="/static//images/index-head.png" alt=""></div>
    <div class="div3 m-0 p-0">
      <div class="left"><img src="/static/images/facebook.png" alt=""></div>
      <div class="left"><img src="/static/images/facebook.png" alt=""></div>
      <div class="left"><img src="/static/images/facebook.png" alt=""></div>
      <div class="left"><img src="/static/images/facebook.png" alt=""></div>

      <div class="right">语言
        <img src="/static/images/facebook.png" alt="">
      </div>
    </div>
  </div>
  <div class="box2 p-2 mt-lg-2 mt-0 container">
    <div class="left hover-box"><img src="/static/images/three.png" alt=""></div>
    <div class="center">
      <span><a href="/index.html" class="text-black text-decoration-none">家</a></span>
      <span><a href="/index-2.html" class="text-black text-decoration-none">大约</a></span>
      <span><a href="/index-3.html" class="text-black text-decoration-none">服务业</a><img src="/static/images/sanjiao.png" alt=""></span>
      <span><a href="/index-4.html" class="text-black text-decoration-none">博客</a><img src="/static/images/sanjiao.png" alt=""></span>
      <span><a href="/index-5.html" class="text-black text-decoration-none">联系</a></span>
      <span><a href="/index-6.html" class="text-black text-decoration-none">字体排印学</a></span>
    </div>
    <div class="right">
      <img src="/static/images/sousuo.png" alt="">
    </div>
  </div>
  <div class="page__carousel">
    <div class="swiper index_page_swiper">
      <div class="swiper-wrapper index_page_swiper_wrapper">
        <div class="swiper-slide">
          <img src="/static/images/banner.png">
          <div class="animate__box">
            <div class="title_one ">立即致电我们</div>
            <div class="title_two ">100582-2254</div>
            <p style="" class="title_four">
              产品 <br>
              服务或活动的标题<br />

            <p style="" class="title_three">这是一个标语，您可以在其中写下您的想法的关键点。 这是一个很长<br /> 既定事实，读者会分心。</p>
            </p>
            <a href="" class="more">
              立即与我们合作
            </a>

          </div>
        </div>
        <div class="swiper-slide">
          <img src="/static/images/banner.png" alt="">
          <div class="animate__box">
            <div class="title_one ">立即致电我们</div>
            <div class="title_two ">100582-2254</div>
            <p style="" class="title_four">
              产品 <br>
              服务或活动的标题<br />

            <p style="" class="title_three">这是一个标语，您可以在其中写下您的想法的关键点。 这是一个很长<br /> 既定事实，读者会分心。</p>
            </p>
            <a href="" class="more">
              立即与我们合作
            </a>

          </div>
        </div>
      </div>
      <!-- 下面圆点 -->
      <div class="swiper-pagination"></div>
      <!-- 左右两边按键 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
  <div class="hover-left">
    <div class="mengban">
      <div class="guanbi w-100 remove">X</div>
      <div class="xuanxiang mt-5"><a href="/index.html" class="text-white text-decoration-none">家</a></div>
      <div class="xuanxiang"><a href="/index-2.html" class="text-white text-decoration-none">大约</a></div>
      <div class="xuanxiang"><a href="/index-3.html" class="text-white text-decoration-none">服务业</a></div>
      <div class="xuanxiang"><a href="/index-4.html" class="text-white text-decoration-none">博客</a></div>
      <div class="xuanxiang"><a href="/index-5.html" class="text-white text-decoration-none">联系</a></div>
      <div class="xuanxiang"><a href="/index-6.html" class="text-white text-decoration-none">字体排印学</a></div>
    </div>
  </div>
  <div class="content1 p-lg-5 p-3">
    <div class="container text-white text-center">
      <div class="title1">联系</div>
      <div class="title2">家&nbsp;/&nbsp;联系</div>
    </div>
  </div>
  <div class="content2 ">
    <div class="container m-auto py-3 py-lg-5">
      <div style="width:100%;height:550px;border:#ccc solid 1px;" id="map"></div>
    </div>
  </div>
  <div class="content3 bg-white p-lg-5">
    <div class="container">
      <div class="title1  py-lg-4">
        全球位置
      </div>
      <div class="row">
        <div class="col-lg-3 col-6">
          <div class="title2">
            总公司
          </div>
          <div class="bottom">
            <ul class="m-0 p-0">
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none li-color">Lorem ipsum dolor </a></li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-6">
          <div class="title2">
            总公司
          </div>
          <div class="bottom">
            <ul class="m-0 p-0">
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none li-color">Lorem ipsum dolor </a></li>
            </ul>
          </div>
        </div>
        <div class="col-lg-3 col-6">
          <div class="title2">
            总公司
          </div>
          <div class="bottom">
            <ul class="m-0 p-0">
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none li-color">Lorem ipsum dolor </a></li>
            </ul>
          </div>
        </div>
        <div class="col-lg-3 col-6">
          <div class="title2">
            总公司
          </div>
          <div class="bottom">
            <ul class="m-0 p-0">
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none">Lorem ipsum dolor </a></li>
              <li><a href="#" class="text-decoration-none li-color">Lorem ipsum dolor </a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="content4 p-lg-5">
    <div class="container m-auto py-5">
      <div class="title1  py-lg-4">
        向我们发送您的反馈
      </div>
      <div class="row py-lg-3">
        <div class="col-lg-4 col-12">
          <div class="title2">
            名字*
          </div>
          <input type="text" class="shadow">
        </div>
        <div class="col-lg-4 col-12">
          <div class="title2">
            电子邮件*
          </div>
          <input type="text" class="shadow">
        </div>
        <div class="col-lg-4 col-12">
          <div class="title2">
            网站
          </div>
          <input type="text" class="shadow">
        </div>
      </div>
      <div class="row py-lg-3">
        <div class="col-lg-4 col-12">
          <div class="title2">
            组织
          </div>
          <input type="text" class="shadow">
        </div>
        <div class="col-lg-4 col-12">
          <div class="title2">
            位置
          </div>
          <input type="text" class="shadow">
        </div>
        <div class="col-lg-4 col-12">
          <div class="title2">
            国家
          </div>
          <input type="text" class="shadow">
        </div>
      </div>
      <div class="row py-lg-3 px-2">
        <div class="title2">
          消息
        </div>
        <input type="textarea" class="shadow">
      </div>
      <div class="bottom mt-3">
        发送反馈
      </div>
    </div>
  </div>



  <!--百度地图容器-->




  <div class="footer  py-lg-5 py-3">
    <div class="container py-4">
      <div class="row g-0">
        <div class="col-12 col-md-6 col-lg-4">
          <div class="footer-one">大约</div>
          <div class="f-xin pt-4">可信地为充分研究的范式构建虚拟材料。权威抄袭长期高
            影响力的信息中介</div>
          <div class="shu pt-3"><a href="tel:+(554)616 9926" class="text-white text-decoration-none">(554)616 9926</a></div>
          <div class="wangzhan pt-3"><a href="http://example@yahoo.com" target="_blank" rel="noopener noreferrer" class="text-decoration-none">example@yahoo.com</a></div>
          <div class="maple pt-3">384 Maple Circle<br>
            SimiVaey Nevada 24757</div>
        </div>
        <div class="col-12 col-md-6 col-lg-2">
          <div class="footer-one">有用的链接</div>
          <a href="javascript:;" class="f-xin pt-4 d-block text-decoration-none">&gt;关于我们</a>
          <a href="javascript:;" class="f-xin pt-2 d-block text-decoration-none">&gt;博客</a>
          <a href="javascript:;" class="f-xin pt-2 d-block text-decoration-none">&gt;联系</a>
          <a href="javascript:;" class="f-xin pt-2 d-block text-decoration-none">&gt;生涯</a>
          <a href="javascript:;" class="f-xin pt-2 d-block text-decoration-none">&gt;员工</a>
          <a href="javascript:;" class="f-xin pt-2 d-block text-decoration-none">&gt;新闻</a>
          <a href="javascript:;" class="f-xin pt-2 d-block text-decoration-none">&gt;支持</a>
        </div>
        <div class="col-12 col-md-6 col-lg-2">
          <a href="javascript:;" class="f-xin pt-5 d-block text-decoration-none">&gt;关于我们</a>
          <a href="javascript:;" class="f-xin pt-2 d-block text-decoration-none">&gt;博客</a>
          <a href="javascript:;" class="f-xin pt-2 d-block text-decoration-none">&gt;联系</a>
          <a href="javascript:;" class="f-xin pt-2 d-block text-decoration-none">&gt;生涯</a>
          <a href="javascript:;" class="f-xin pt-2 d-block text-decoration-none">&gt;员工</a>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
          <div class="footer-one">保持联系</div>
          <div class="youjian pt-4">输入您的电子邮件地址以接收我们的新闻和优惠</div>
          <div class="fa p-2 my-3">
            <input type="text" placeholder="您的电子邮件地址" class="fasong" />
            <button size="main" class="rounded-2 border-0 but">发送</button>
          </div>
          <div class="tupiao">
            <a href=""><img src="/static/images/twitter.png" class="tpone" alt=""></a>
            <a href=""><img src="/static/images/twitter.png" class="tpone" alt=""></a>
            <a href=""><img src="/static/images/twitter.png" class="tpone" alt=""></a>
            <a href=""><img src="/static/images/twitter.png" class="tpone" alt=""></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="f-bottom bg-black">
    <div class="container py-4 ">
      <div class="yinsi">
        隐私和饼干条款和条件可及性
      </div>
      <div class="yinsi">版权所有 @ 2015 取消发货。保留所有权利。
        <a href="javascript:;" class=" text-decoration-none">网页模板</a>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    //创建和初始化地图函数：
    function initMap() {
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
    }

    //创建地图函数：
    function createMap() {
      var map = new BMap.Map("map");//在百度地图容器中创建一个地图
      var point = new BMap.Point(116.395645, 39.929986);//定义一个中心点坐标
      map.centerAndZoom(point, 12);//设定地图的中心点和坐标并将地图显示在地图容器中
      window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent() {
      map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
      map.enableScrollWheelZoom();//启用地图滚轮放大缩小
      map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
      map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
      //向地图中添加缩放控件
      var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
      map.addControl(ctrl_nav);
      //向地图中添加缩略图控件
      var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
      map.addControl(ctrl_ove);
      //向地图中添加比例尺控件
      var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
      map.addControl(ctrl_sca);
    }


    initMap();//创建和初始化地图
  </script>


  <script>
    var swiper = new Swiper('.index_page_swiper', {
      loop: true,
      autoplay: {
        delay: 17000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.index_page_swiper .swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.index_page_swiper .swiper-button-next',
        prevEl: '.index_page_swiper .swiper-button-prev'
      },
      on: {
        init() {
          utils.ready(() => {
            // 初始化第一屏幕轮播的动画效果
            this.slides[0].querySelector('.animate__box').classList
              .add('animate__fadein_up');
          })
        },
        slideChangeTransitionStart() {
          // 在开始过渡动画之前, 将所有的动画效果隐藏或删除
          utils.ready(() => {
            this.slides.forEach((slide) => {
              slide.querySelector('.animate__box').classList
                .add('none');
            })
          })
        },
        slideChangeTransitionEnd() {
          // 在过渡动画结束之后, 将当前的动画效果显示出来
          utils.ready(() => {
            // this.slides
            this.slides.forEach((slide) => {
              slide.querySelector('.animate__box').classList
                .remove('animate__fadein_up', 'none');
            })
            this.slides[this.activeIndex].querySelector('.animate__box').classList
              .add('animate__fadein_up');
          })
        }
      }
    });

    window.addEventListener('resize', function () {
      var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      if (screenWidth > 992) {
        $('.hover-left').removeClass('active')
      }
    });
    $(document).ready(function () {
      $('.hover-box').click(function () {
        $('.hover-left').addClass('active')
      })
      $('.hover-left .remove').click(function () {
        $('.hover-left').removeClass('active')
      })
    });
  </script>
</body>

</html>
